<template>
    <div class="search-bar">
        <el-form :inline="true" >

            <el-form-item label="客户名称">
                    <el-input v-model="filters.customer" placeholder="名称" />
                </el-form-item>
                <el-form-item label="订单号"> 
                    <el-input v-model="filters.order_no" placeholder="订单号" />
                </el-form-item>

                <el-form-item>
                        <el-button type="primary" @click="do_search">搜索</el-button>
                    </el-form-item>
        </el-form> 

    </div>
    <el-table
        :data="orderList"
        highlight-current-row
        @current-change=""
        style="width: 100%">
        <el-table-column
            property="order_no"
            label="订单号"
            width="180">
        </el-table-column>
        <el-table-column
            property="customer_name"
            label="客户"
            width="">
            <!-- <template #default="scope">
                <img style="width:100%" :src="scope.row.image" alt="">
                <div>{{ scope.row.customer_name }}</div>
            </template>     -->
        </el-table-column>
        <el-table-column
            property="status_text"
            label="状态"
            width="">
            <template #default="scope">
                <span v-if="scope.row.is_payed==0">未支付</span>
                <span v-if="scope.row.is_payed==1">已支付</span>
                <span v-if="scope.row.is_payed==2">已退款</span>
            </template>  
        </el-table-column>
        
        
        <el-table-column
            property="total"
            label="总计金额(￥)"
            width="">
        </el-table-column>

        <el-table-column
            property="create_time"
            label="生成日期"
            width="">
           
        </el-table-column>

        <el-table-column
            property=""
            label="操作"
            width="">

            <template #default="scope">

                <a v-bind:href="'#/main/order/edit/' + scope.row.id "
                    data-toggle="tooltip" title="编辑"
                    class="el-button el-button--primary el-button--small" >
                    编辑
                </a>
            </template>
        </el-table-column>

    </el-table>

    <div class=" table-below ">
        
        <el-pagination
            @current-change="changePage"
            :page-size="per_page"
            layout="prev, pager, next" :total="total" />
    </div>

</template>

<script lang="ts" setup>

import {ref} from "vue";
import axios from "axios";

const total = ref<number>(10)
const per_page = ref<number>(15)
const current_page = ref<number>(1)

const orderList = ref<Array<object>>([]);
const filters:any = ref<object>({

    order_no:'',
    status:'',
    customer:'',
    start_time:'',
    end_time:'',
});

const get_order_list = ()=>{

    var url = window.VITE_URL + '/admin.order/index';
    url += '?page=' + current_page.value;
    if( filters.value.order_no ){
        url += '&order_no=' + filters.value.order_no;
    }
    if( filters.value.status!= '' ) {
        url += '&status=' + filters.value.status;
    }
    if( filters.value.customer ){
        url += '&customer=' + filters.value.customer;
    }
    if( filters.value.start_time ){
        url += '&start_time=' + filters.value.start_time;
    }

    if( filters.value.end_time ){
        url += '&end_time=' + filters.value.end_time;
    }

    

    axios.get( url ).then(function( res ){

        orderList.value = res.data.list;
        total.value = res.data.total;

    });

}

const do_search = ()=>{
    current_page.value = 1;
    get_order_list();
}
get_order_list();

const changePage = ( val:any ) => {

    current_page.value = val;
    get_order_list()

}

</script>

